<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易四列布局</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
       div.row{
           width: 1090px;
           height: 510px;
           /* background-color: darkgray; */
           display:flex;
           justify-content:space-between;
           margin :0 auto;
       }
       div.row div{
           width: 265px;
           height: 365px;
           display:flex;
           flex-direction:column;
           justify-content: space-between;
       }
       div.row div>section:first-child{
           background-color: firebrick;
           width:265px;
           height: 265px;
       }
       div.row div>section:first-child img{
			width: 265px;
			height: 265px;
		}
       div.row div>section:last-child{
           width:265px;
           height:90px;
           background-color: darkslateblue;
       }
       div.row div>section p{
           text-align: center;
       }
       div.row div>section p>span.tag{
        height: 20px;
        line-height: 20px;/*行高*/
        background-color: rgb(227, 104, 68);
        color: rgb(255, 255, 255) ;
        padding: 0px 5px;
       }
       div.row div>section>p:nth-child(2){
           width: 156px;
           height: 37px;
           color:#333333;
           margin:0 auto;
           padding-top: 5px;
		   margin-bottom: 5px;
       }
       div.row div>section p>span.new{
            color: #d4282d;
			font-size: 13px;
       }
       div.row div>section p>span.old{
           color:#999;
           font-size:12px;
           text-decoration: line-through;
       }
    </style>
</head>
<body>
    <div class="row">
        <div>
            <section>
                <img src="./y1.jpg" alt="">
            </section>
            <section>
                <p>
                    <span class="tag">新品限时购</span>
                </p>
                <p>
                    守护你的发际线，黑芝麻丸100g
                </p>
                <p>
                    <span class="new">￥29</span><span class="old">￥39</span>
                </p>
            </section>
        </div>
        <div>
            <section>
                <img src="y1.jpg" alt="图片找不到">
            </section>
            <section>
                <p>
                    <span class="tag">新品限时购</span>
                </p>
                <p>
                    守护你的发际线，黑芝麻丸100g
                </p>
                <p>
                    <span class="new">￥29</span><span class="old">￥39</span>
                </p>
            </section>
        </div>
        <div>
            <section>
                <img src="y1.jpg" alt="图片找不到">
            </section>
            <section>
                <p>
                    <span class="tag">新品限时购</span>
                </p>
                <p>
                    守护你的发际线，黑芝麻丸100g
                </p>
                <p>
                    <span class="new">￥29</span><span class="old">￥39</span>
                </p>
            </section>
        </div>
        <div>
            <section>
                <img src="y1.jpg" alt="图片找不到">
            </section>
            <section>
                <p>
                    <span class="tag">新品限时购</span>
                </p>
                <p>
                    守护你的发际线，黑芝麻丸100g
                </p>
                <p>
                    <span class="new">￥29</span><span class="old">￥39</span>
                </p>
            </section>
        </div>
    </div>
</body>
</html>